<template>
  <div class="blue-index-container">

    <hurdle :showLine="1" id="headerTab"></hurdle>

    <div class="blue-index-carousel" id="carouselTab">
      <el-carousel trigger="click" height="540px" arrow="never">
        <el-carousel-item v-for="(carouse,index) in carouselList" :key="index">
          <img :src="carouse"/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="blue-index-notice" id="noticeTab">
      <div class="blue-index-notice-con">
        <span class="news-notice-title">最新动态</span>

        <ul class="news-notice-scroll-box" :class="{'scroll-active':animate == true}">
          <li class="news-notice-scroll-con" v-for="(notice,i) in noticeList" :key="i">
            <span class="notice-scroll-text">{{notice.userName}}通过蓝聘成功入职{{notice.mechanismName}}</span>
          </li>
        </ul>

      </div>
    </div>


    <div class="blue-index-search">
      <div class="blue-index-search-box">
        <img src="./location.png" class="search-pic"/>
        <span class="location-text">{{address}}</span>

        <input type="text" placeholder="搜索岗位或公司名称" class="search-key" v-model="keyword" @keyup.enter="searchKeyword"/>
        <button type="button" class="search-btn" @click="searchKeyword">搜&nbsp;&nbsp;索</button>
      </div>

      <div class="index-search-history">
        <span class="search-history-title">搜索历史：</span>
        <span class="search-key-his" v-for="(item,k) in hisItem" :key="k" @click="searchWord(item)">{{item}}</span>
      </div>
    </div>

    <div class="blue-index-work-box">

      <div class="blue-index-work-search">
        <div class="work-search-city">
          <span class="select-text">城市选择：</span>
          <div class="search-city-con">
            <span class="town-active-val">{{location}}</span>
            <span v-for="(item,l) in locationList" :key="l"
                  @click="selectLocation(item.name,item.area)">{{item.name}}</span>
          </div>
          <span class="look-all-city" @click="openCityModal">查看全部城市</span>
        </div>

        <div class="work-search-town" v-if="districtList.length > 0">
          <span class="town-text">区域：</span>
          <div class="search-town-box">
            <span :class="{'select-active-val':districtId == d}"
                  v-for="(district,d) in districtList" @click="selectDistrict(d,district)">{{district}}</span>
          </div>
        </div>

        <div class="work-search-factory">
          <span class="factory-text">类型选择：</span>
          <div class="search-city-con2">
            <span :class="{'select-active-val':mechanismType == 0}" @click="selectMechanism(0)">不限</span>
            <span :class="{'select-active-val':factory.id == mechanismType}" v-for="(factory,j) in mechanismTypeList"
                  :key="j"
                  @click="selectMechanism(factory.id)">{{factory.mechanismTypeName}}</span>
          </div>
        </div>
        <div class="work-search-post">
          <span class="select-text">工种选择：</span>
          <div class="search-city-con">
            <span :class="{'select-active-val':workType == 2}" @click="queryWorkType(2)">不限</span>
            <span :class="{'select-active-val':workType == 0}" @click="queryWorkType(0)">正式工</span>
            <span :class="{'select-active-val':workType == 1}" @click="queryWorkType(1)">小时工</span>
          </div>
        </div>
      </div>

      <div class="blue-job-work-box" v-if="showData == 1">

        <div class="blue-job-work-item" v-for="(work,index) in workList" :key="index" @click="openRecruit(work.id)">
          <div class="blue-job-work-con">
            <img :src="work.mechanismUrl?work.mechanismUrl:require('../../images/pic _bg.png')" class="blue-job-pic1"/>
            <div class="blue-job-company-box">

              <div class="company-con1">
                <span class="company-name">{{work.mechanismName}}</span><span class="company-lend"
                                                                              v-show="work.lendType == 1">可借支</span>
              </div>
              <div class="company-con2">
                <span>{{work.workTypeName}}</span>
              </div>
              <div class="company-con3">
                招聘要求：<span v-if="work.age">{{work.age}}</span><span>招{{work.maxNumber}}人</span><span
                v-if="work.status != 1">/已报名{{work.applyNumber}}人</span>
              </div>

              <div class="company-con4">
                <span v-if="work.postType == 0">{{work.wageRange}}元/月</span>
                <span v-if="work.postType == 1">{{work.workMoney}}元/时</span>
              </div>
            </div>

            <div class="blue-job-return-fee-box"
                 v-if="work.postType == 0 && work.reStatus == 1 && work.reMoney > 0 && work.reTime > 0">
              <img src="../../images/reward.png" class="blue-job-pic2"/>
              <span class="blue-job-work-money">{{work.reMoney}}元</span>
            </div>
            <div class="blue-job-return-fee-box"
                 v-if="work.postType == 1 && work.reStatus == 1 && work.addWorkMoney > 0 && work.reTime > 0">
              <img src="../../images/reward.png" class="blue-job-pic2"/>
              <span class="blue-job-work-money">{{Math.floor(work.addWorkMoney * 10) / 10}}元/时</span>
            </div>

            <div class="blue-job-info-box">
              <span class="blue-job-line"></span>
              <div class="blue-job-info-con">
                <button class="await-apply" type="button" v-if="work.status == 1">待招聘</button>
                <button class="promptly-apply" type="button" v-else-if="work.isApply == 1 || work.isApply == null"
                        @click="openApplyModal(work.reTime,work.reMoney,work.interviewTime,work.mechanismId,work.id,work.recruitAddress,work.mechanismName)">
                  立即报名
                </button>
                <button class="cancel-apply" type="button" v-else-if="work.isApply == 0" @click="cancelApply(work.id)">
                  取消报名
                </button>
              </div>
            </div>

          </div>
        </div>

        <el-pagination background layout="prev, pager, next" :total="totalSize" :page-size="8"
                       :hide-on-single-page="true"
                       prev-text='上一页' next-text='下一页' class="blue-job-page-box" @current-change="curPage"
                       v-if="showData == 1 && workList.length>0">
        </el-pagination>
      </div>


      <empty tipText="搜索尚无结果，更多企业正在洽谈中，敬请期待！" v-if="showData == 2"></empty>
    </div>

    <login-popup :showModal="showModal" @closeModal="closeModal" @loginBackCall="loginBackCall"></login-popup>

    <apply-work :showApplyModal="showApplyModal" @closeApplyModal="closeApplyModal"
                @commitApply="commitApply"></apply-work>

    <apply-success :showApplySuccess="showApplySuccess" @closeApplySuccess="closeApplySuccess"
                   @lookApplySuccess="lookApplySuccess"></apply-success>


    <service></service>

    <store-footer></store-footer>

    <el-backtop target=".blue-index-container"></el-backtop>

    <city-select :showCityModal="showCityModal" @closeCityModal="closeCityModal" @commitCity="commitCity"></city-select>

    <back-top></back-top>
  </div>
</template>

<script>
  import hurdle from "../../components/hurdle";
  import service from "../../components/service";
  import storeFooter from "../../components/storeFooter";
  import applyWork from "../../components/applyWork";
  import applySuccess from "../../components/applySuccess";
  import citySelect from "../../components/citySelect";
  import backTop from "../../components/backTop";
  import {
    getSessionStore,
    getStore,
    removeSessionStore,
    scrollSpot,
    setSessionStore,
    setStore
  } from "../../config/util";
  import {baseUrl} from "../../config/env";
  import {Loading} from 'element-ui';
  import loginPopup from "../../components/loginPopup";
  import Empty from "../../components/empty";
  import {clearCache} from "../../config/verify";

  export default {
    metaInfo: {
      title: '蓝聘,专注蓝领人士的求职服务！',
      meta: [
        {
          name: 'keywords',
          content: '蓝聘,专注蓝领人士的求职服务，蓝聘，蓝聘app，www.lanpin123.com，蓝聘网络科技'
        },
        {
          name: 'description',
          content: '蓝聘APP,服务蓝领群体，真实、可靠、值得信赖的招聘服务平台，提供记工时、查工资、企业点评、无偿借支等多项功能，线上、线下全方位服务，让蓝领人士在求职的路上不再坎坷.'
        }
      ]
    },
    inject: ['reload'],
    data() {
      return {
        address: "",
        carouselList: [
          require("./banner.png"),
          require("./banner02.png"),
          require("./banner03.png"),
        ],
        userWand: "",
        noticeList: [],
        noticeTimer: null,
        animate: false,
        workList: [],
        page: 1,
        size: 8,
        showData: 0,
        totalSize: 0,
        showApplyModal: false,
        realName: "",
        userToken: "",
        showModal: false,
        identity: "",
        origin: "",
        workId: "",
        reTime: "",
        reMoney: "",
        interviewTime: "",
        mechanismId: "",
        recruitAddress: "",
        mechanismName: "",
        showApplySuccess: false,
        keyword: "",
        hisItem: [],
        workType: 2,
        mechanismTypeList: [],
        mechanismTypeId: 0,
        mechanismType: 0,
        showCityModal: false,
        locationList: [{"name": "全国", "area": []},
          {
            "name": "东莞", "area": ["全市", "莞城区", "南城区", "万江区", "石碣镇", "石龙镇", "茶山镇", "石排镇", "企石镇", "横沥镇", "桥头镇",
              "谢岗镇", "东坑镇", "常平镇", "寮步镇", "大朗镇", "麻涌镇", "中堂镇", "高埗镇", "樟木头镇", "大岭山镇", "望牛墩镇",
              "黄江镇", "洪梅镇", "清溪镇", "沙田镇", "道滘镇", "塘厦镇", "虎门镇", "厚街镇", "凤岗镇", "长安镇"]
          },
          {
            "name": "深圳", "area": ["全市", "罗湖区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区", "光明新区", "坪山新区", "大鹏新区", "龙华新区"]
          },
          {
            "name": "北京", "area": ["全市", "东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区",
              "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县"]
          },
          {
            "name": "上海", "area": ["全市", "黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区",
              "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明县"]
          },
          {"name": "广州", "area": ["全市", "荔湾区", "越秀区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "从化区", "增城区"]},
          {
            "name": "杭州", "area": ["全市", "上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区", "萧山区", "余杭区", "桐庐县",
              "淳安县", "建德市", "富阳区", "临安市"]
          },
          {"name": "惠州", "area": ["全市", "惠城区", "惠阳区", "博罗县", "惠东县", "龙门县"]},
          {"name": "珠海", "area": ["全市", "香洲区", "斗门区", "金湾区"]},
          {
            "name": "成都", "area": ["全市", "锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区", "金堂县", "双流县",
              "郫县", "大邑县", "蒲江县", "新津县", "都江堰市", "彭州市", "邛崃市", "崇州市"]
          },
          {"name": "南京", "area": ["全市", "玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区", "雨花台区", "江宁区", "六合区", "溧水区", "高淳区"]},
          {
            "name": "武汉", "area": ["全市", "江岸区", "江汉区", "硚口区", "汉阳区", "武昌区", "青山区", "洪山区", "东西湖区",
              "汉南区", "蔡甸区", "江夏区", "黄陂区", "新洲区"]
          },
          {
            "name": "西安", "area": ["全市", "新城区", "碑林区", "莲湖区", "灞桥区", "未央区", "雁塔区", "阎良区", "临潼区", "长安区", "蓝田县",
              "周至县", "户县", "高陵区"]
          },
          {"name": "厦门", "area": ["全市", "思明区", "海沧区", "湖里区", "集美区", "同安区", "翔安区"]},
          {"name": "长沙", "area": ["全市", "芙蓉区", "天心区", "岳麓区", "开福区", "雨花区", "望城区", "长沙县", "宁乡县", "浏阳市"]},
          {"name": "汕头", "area": ["全市", "龙湖区", "金平区", "濠江区", "潮阳区", "潮南区", "澄海区", "南澳县"]},
          {"name": "佛山", "area": ["全市", "禅城区", "南海区", "顺德区", "三水区", "高明区"]}],
        districtId: 0,
        districtList: [],
        mechanismAddress: "china",
        location: "全国",
        looKMore: this.$route.query.looKMore
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      if (getSessionStore("userWand")) {
        this.userWand = base64.decode(getSessionStore("userWand"));
        this.queryIsRealName();
      }
      if (getSessionStore("userToken")) {
        this.userToken = getSessionStore("userToken");
      }

      this.initSearch();
      this.queryWorkList();
      this.queryFactoryList();
    },
    mounted() {
      if (getSessionStore("searchCity")) {
        this.address = getSessionStore("searchCity");
      } else {
        this.initMap();
      }
      this.initKeyWord();

      if (this.looKMore == 1) {
        let headerHeight = document.querySelector('#headerTab').clientHeight;
        let carouselHeight = document.querySelector('#carouselTab').clientHeight;
        let noticeHeight = document.querySelector('#noticeTab').clientHeight;
        let scrollHeight = headerHeight + carouselHeight + noticeHeight;
        scrollSpot(scrollHeight, 300);
      }
    },
    methods: {
      initSearch() {
        if (getSessionStore("searchKeyWord")) {
          this.keyword = getSessionStore("searchKeyWord");
        }

        if (getSessionStore("searchCity")) {
          this.location = getSessionStore("searchCity");
          this.mechanismAddress = getSessionStore("searchCity") == "全国" ? 'china' : getSessionStore("searchCity");

          for (let i = 0; i < this.locationList.length; i++) {
            if (this.location == this.locationList[i].name) {
              this.districtList = this.locationList[i].area;
              break;
            }
          }
        }
        if (getSessionStore("searchTown")) {
          if (getSessionStore("searchTown") == "全市") {
            this.mechanismAddress = getSessionStore("searchCity");
          } else {
            this.mechanismAddress = getSessionStore("searchTown");
            for (let i = 0; i < this.districtList.length; i++) {
              if (this.mechanismAddress == this.districtList[i]) {
                this.districtId = i;
                break;
              }
            }
          }
        }
        if (getSessionStore("searchFactory")) {
          this.mechanismType = getSessionStore("searchFactory");
        }
        if (getSessionStore("searchWorkType")) {
          this.workType = getSessionStore("searchWorkType");
        }
      },
      queryWorkType(key) {//根据工种查询
        this.workType = key;
        setSessionStore("searchWorkType", key);
        this.page = 1;
        this.size = 8;
        this.workList = [];
        this.queryWorkList();
      },
      selectMechanism(key) {//根据企业查询
        this.mechanismType = key;
        setSessionStore("searchFactory", key);
        this.page = 1;
        this.size = 8;
        this.workList = [];
        this.queryWorkList();
      },
      searchWord(word) {
        this.keyword = word;
        setSessionStore("searchKeyWord", this.keyword);
        this.page = 1;
        this.size = 8;
        this.workList = [];
        this.queryWorkList();
        this.initKeyWord();
      },
      searchKeyword() {
        let flag = this.findArray(this.keyword, this.hisItem);
        if (flag) {//输入的内容localStorage有记录
          let hisWordList = JSON.parse(getStore("_search_history"));
          for (let i = 0; i < hisWordList.length; i++) {
            if (this.keyword == hisWordList[i]) {
              hisWordList.splice(i, 1);
              break;
            }
          }
          hisWordList.push(this.keyword);
          setStore("_search_history", hisWordList);
        } else {
          if (this.hisItem.length >= 3) {
            let hisWordList = JSON.parse(getStore("_search_history"));
            for (let i = 0; i < hisWordList.length; i++) {
              hisWordList.splice(0, 1);
              break;
            }
            hisWordList.push(this.keyword);
            setStore("_search_history", hisWordList);
          } else {
            this.hisItem.push(this.keyword);
            setStore("_search_history", this.hisItem);
          }
        }
        if (this.keyword) {
          setSessionStore("searchKeyWord", this.keyword);
        }
        this.page = 1;
        this.size = 8;
        this.workList = [];
        this.queryWorkList();
        this.initKeyWord();
      },
      initKeyWord() {
        let hisWordList = getStore("_search_history");
        if (hisWordList) {
          this.hisItem = JSON.parse(hisWordList).reverse();
        }
      },
      findArray(index, array) {
        for (let i = 0; i < array.length; i++) {
          if (array[i] === index) {
            return true;
          }
        }
      },
      queryWorkList() {
        this.axios.get(baseUrl + "/workapi/get_work_list_api?userToken=" + this.userToken + "&page=" + this.page + "&size=" + this.size + "&workTypeName=" + this.keyword + "&mechanismTypeId=" + (this.mechanismType == 0 ? '' : this.mechanismType) + "&workType=" + (this.workType == 2 ? '' : this.workType) + "&mechanismAddress=" + encodeURI(this.mechanismAddress)).then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            if (retObj.data.workBarsList != null && retObj.data.workBarsList.length > 0) {//最新动态
              this.noticeList = retObj.data.workBarsList;
              if (this.noticeTimer) {
                clearTimeout(this.noticeTimer);
              }
              this.$nextTick(() => {
                this.noticeScroll();
              });
            }
            this.totalSize = retObj.data.totalSize;//总页数

            if (retObj.data.list != null && retObj.data.list.length > 0) {//招聘列表
              this.showData = 1;
              this.workList = retObj.data.list;
            } else {
              this.showData = 2;
            }
          } else {
            this.$message({message: retObj.msg, center: true, type: 'error', duration: 1000});
          }
        });
      },
      curPage(page) {
        let headerHeight = document.querySelector('#headerTab').clientHeight;
        let carouselHeight = document.querySelector('#carouselTab').clientHeight;
        let noticeHeight = document.querySelector('#noticeTab').clientHeight;
        let scrollHeight = headerHeight + carouselHeight + noticeHeight;
        scrollSpot(scrollHeight, 300);
        this.page = page;
        this.queryWorkList();
      },
      noticeScroll() {
        this.noticeTimer = setInterval(() => {
          this.animate = true;// 向上滚动的时需要添加css3过渡动画
          setTimeout(() => {
            this.noticeList.push(this.noticeList[0]);
            this.noticeList.shift();
            this.animate = false;
          }, 500)
        }, 2000);
      },
      openApplyModal(reTime, reMoney, interviewTime, mechanismId, workId, recruitAddress, mechanismName, e) {
        this.reTime = reTime;
        this.reMoney = reMoney;
        this.interviewTime = interviewTime;
        this.workId = workId;
        this.mechanismId = mechanismId;
        this.recruitAddress = recruitAddress;
        this.mechanismName = mechanismName;
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }
        if (this.userWand) {
          let name = this.queryIsRealName();
          if (name != "" && name != undefined && name != null) {//实名
            this.commitApply(name);
          } else {
            this.showApplyModal = true;
          }
        } else {
          this.showModal = true;
        }
      },
      closeApplyModal() {
        this.showApplyModal = false;
      },
      openRecruit(workId) {
        clearCache();
        window.open("/workDetail?workId=" + workId);
      },
      queryIsRealName() {
        this.axios.get(baseUrl + "/workapi/get_user_real_api?userToken=" + this.userToken).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            this.realName = resultObj.data;
          }
        });
      },
      closeModal() {
        this.showModal = false;
      },
      loginBackCall() {
        this.reload();
      },
      commitApply(name) {//报名
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.showApplyModal = false;
        let data = {
          "reTime": this.reTime,
          "reMoney": this.reMoney,
          "identity": this.identity,
          "interviewTime": this.interviewTime,
          "mechanismId": this.mechanismId,
          "userName": name,
          "workId": this.workId,
          "recruitAddress": this.recruitAddress,
          "mechanismName": this.mechanismName,
          "origin": this.origin,
        };

        this.axios.post(baseUrl + "/work/entryApply?type=1" + "&userToken=" + this.userToken, data).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "报名失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.showApplySuccess = true;
              this.queryWorkList();
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      cancelApply(workId, e) {//取消报名
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }

        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.axios.post(baseUrl + "/work/cancleApply?userToken=" + this.userToken + "&workId=" + workId).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "取消报名失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.queryWorkList();
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      closeApplySuccess() {
        this.showApplySuccess = false;
      },
      lookApplySuccess() {
        this.showApplySuccess = false;
        window.open("/interview");
      },
      initMap() {
        let map = new AMap.Map('container', {
          resizeEnable: true
        });

        AMap.plugin('AMap.Geolocation', () => {
          let geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition((status, result) => {
            if (status == 'complete') {
              this.onComplete(result)
            } else {
              this.onError(result)
            }
          });
        });
      },
      onComplete(data) {//解析定位结果
        if (data.addressComponent && data.addressComponent.city) {
          this.address = data.addressComponent.city.replace("市", "");
        } else {
          this.address = "定位失败";
        }
      },
      onError(data) {
        AMap.plugin('AMap.CitySearch', () => {
          let citySearch = new AMap.CitySearch();
          citySearch.getLocalCity((status, result) => {
            if (status === 'complete' && result.info === 'OK') {
              this.address = result.city.replace("市", "");
            } else {
              this.address = "定位失败";
            }
          })
        })
      },
      queryFactoryList() {
        this.axios.get(baseUrl + "/work/query_mechanismlist").then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.mechanismTypeList = resultObj.data.mechanismTypeList;
          }
        });
      },
      closeCityModal() {
        this.showCityModal = false;
      },
      openCityModal() {
        this.showCityModal = true;
      },
      commitCity(name, townList) {
        this.showCityModal = false;
        this.location = name;
        this.address = name;
        this.districtList = townList;
        this.districtId = 0;
        setSessionStore("searchCity", name);
        if (name == "全国") {
          removeSessionStore("searchTown");
          this.mechanismAddress = "china";
        } else {
          this.mechanismAddress = name;
        }
        this.page = 1;
        this.size = 8;
        this.workList = [];
        this.queryWorkList();
      },
      selectLocation(name, areaList) {
        this.districtList = areaList;
        this.location = name;
        this.districtId = 0;
        this.address = name;
        setSessionStore("searchCity", name);
        removeSessionStore("searchTown");
        if (name == "全国") {
          this.mechanismAddress = "china";
        } else {
          this.mechanismAddress = name;
        }
        this.page = 1;
        this.size = 8;
        this.workList = [];
        this.queryWorkList();
      },
      selectDistrict(index, name) {
        this.districtId = index;
        this.mechanismAddress = name == "全市" ? this.location : name;
        setSessionStore("searchTown", name);
        this.page = 1;
        this.size = 8;
        this.workList = [];
        this.queryWorkList();
      }
    },
    watch: {
      keyword() {
        if (this.keyword == "" || this.keyword == undefined || this.keyword == null) {
          removeSessionStore("searchKeyWord");
          this.page = 1;
          this.size = 8;
          this.workList = [];
          this.queryWorkList();
        }
      }
    },
    components: {
      hurdle,
      service,
      storeFooter,
      applyWork,
      applySuccess,
      loginPopup,
      Empty,
      citySelect,
      backTop
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/mixin";

  .blue-index-container {
    position: relative;
    .wh(100%, auto);
    .blue-index-carousel {
      .wh(100%, 540px);
    }
    .blue-index-carousel /deep/ .el-carousel__container img {
      .wh(100%, 540px);
    }
    .blue-index-notice {
      .wh(100%, 72px);
      background: #FFF;
      display: flex;
      justify-content: center;
      .blue-index-notice-con {
        display: flex;
        align-items: center;
        .wh(1200px, 72px);
        .news-notice-title {
          text-align: center;
          line-height: 72px;
          .wh(180px, 72px);
          background: #2274E6;
          .size-color(24px, #FFF);
        }
        .news-notice-scroll-box {
          .wh(1020px, 72px);
          overflow: hidden;
          .news-notice-scroll-con {
            padding-left: 48px;
            display: flex;
            align-items: center;
            .size-color(18px, #47718F);
            .ellipsis(100%);
            height: 72px;
          }
        }
        .scroll-active {
          transition: all 0.5s linear;
          margin-top: -144px
        }
      }
    }
    .blue-index-search {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, 160px);
      background: #F2F4F5;
      .blue-index-search-box {
        padding-top: 42px;
        padding-bottom: 14px;
        display: flex;
        align-items: center;
        .wh(1200px, 56px);
        .search-pic {
          padding-left: 14px;
          padding-right: 10px;
          .wh(20px, 20px);
        }
        .location-text {
          .ellipsis(84px);
          padding-right: 10px;
          .size-color(20px, #47718F);
        }
        .search-key {
          .wh(890px, 56px);
          background: #FFF;
          border: 1px solid #F2F2F2;
          .size-color(16px, #999999);
          padding-left: 20px;
        }
        .search-btn {
          .wh(160px, 56px);
          background: #3CAFFF;
          border: 1px solid #3AA6F2;
          .size-color(20px, #FFF);
          &:hover {
            background: #39A2ED;
          }
        }
      }
      .index-search-history {
        .wh(1200px, auto);
        display: flex;
        .search-history-title {
          margin-left: 146px;
          .size-color(14px, #666666);
        }
        .search-key-his {
          .size-color(14px, #3CAFFF);
          padding-left: 10px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .blue-index-work-box {
      .wh(100%, auto);
      display: flex;
      flex-direction: column;
      align-items: center;
      .blue-index-work-search {
        .wh(1200px, auto);
        background: #FAFAFA;
        border: 1px solid #EBEBEB;
        margin-top: 40px;
        margin-bottom: 32px;
        .work-search-city {
          display: flex;
          align-items: center;
          height: 48px;
          .look-all-city {
            padding-left: 40px;
            .size-color(14px, #47718F);
            &:hover {
              color: #3E637D;
              cursor: pointer;
            }
          }
        }
        .work-search-town {
          .wh(100%, auto);
          background: #FFF;
          display: flex;
          .town-text {
            height: 48px;
            line-height: 48px;
            .size-color(16px, #47718F);
            padding-left: 72px;
            padding-right: 4px;
          }
          .search-town-box {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            width: 1000px;
            .size-color(14px, #333333);
            span {
              padding: 4px 10px;
              text-align: center;
              border-radius: 2px;
              line-height: 40px;
              &:hover {
                cursor: pointer;
              }
            }
            .select-active-val {
              background: #3CAFFF;
              color: #FFF;
              line-height: 20px;
            }
          }
        }
        .work-search-factory {
          display: flex;
          .factory-text {
            height: 48px;
            line-height: 48px;
            padding-right: 4px;
            padding-left: 40px;
            .size-color(16px, #47718F);
          }
        }
        .work-search-post {
          display: flex;
          align-items: center;
          height: 48px;
        }
        .search-city-con {
          display: flex;
          .size-color(14px, #333333);
          align-items: center;
          span {
            padding: 4px 10px;
            text-align: center;
            border-radius: 2px;
            &:hover {
              cursor: pointer;
            }
          }
          .select-active-val {
            background: #3CAFFF;
            line-height: 20px;
            color: #FFF;
          }
          .town-active-val {
            border: 1px solid rgba(60, 175, 255, 1);
            line-height: 20px;
            color: #3CAFFF;
          }
        }
        .search-city-con2 {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          width: 1000px;
          .size-color(14px, #333333);
          span {
            padding: 4px 10px;
            text-align: center;
            border-radius: 2px;
            line-height: 40px;
            &:hover {
              cursor: pointer;
            }
          }
          .select-active-val {
            background: #3CAFFF;
            color: #FFF;
            line-height: 20px;
          }
        }
        .select-text {
          padding-right: 4px;
          padding-left: 40px;
          .size-color(16px, #47718F);
        }

      }
      .blue-job-work-box {
        .wh(100%, auto);
        display: flex;
        flex-direction: column;
        align-items: center;
        .blue-job-work-item {
          display: flex;
          flex-direction: column;
          .wh(1200px, 148px);
          margin-bottom: 16px;
          border: 1px solid #EBEBEB;
          .blue-job-work-con {
            display: flex;
            align-items: center;
            .wh(100%, 147px);
            background: #FFF;
            position: relative;
            &:hover {
              background: #FAFAFA;
            }
            .blue-job-pic1 {
              margin-left: 18px;
              margin-right: 25px;
              .wh(152px, 112px);
            }
            .blue-job-company-box {
              display: flex;
              flex-direction: column;
              .company-con1 {
                display: flex;
                align-items: center;
                padding-bottom: 10px;
                .company-name {
                  .size-color(18px, #333333);
                }
                .company-lend {
                  .wh(60px, 20px);
                  background: #3CAFFF;
                  border-radius: 2px;
                  .size-color(14px, #FFF);
                  text-align: center;
                  line-height: 20px;
                  margin-left: 22px;
                }
              }
              .company-con2 {
                .size-color-weight(16px, #3CAFFF, 500);
              }
              .company-con3 {
                padding-top: 10px;
                padding-bottom: 15px;
                span {
                  .size-color(14px, #4D4D4D);
                  &:nth-child(1) {
                    margin-right: 15px;
                  }
                }
              }
              .company-con4 {
                .size-color-weight(16px, #FF7C3C, 500);
              }
            }
            .blue-job-return-fee-box {
              position: absolute;
              right: 186px;
              top: 24px;
              .wh(92px, 92px);
              .blue-job-pic2 {
                .wh(100%, 100%)
              }
              .blue-job-work-money {
                position: absolute;
                bottom: 13px;
                width: 75px;
                left: 0;
                text-align: center;
                .size-color-weight(15px, #FFF, 500);
              }
            }
            .blue-job-info-box {
              position: absolute;
              right: 0;
              top: 0;
              .wh(160px, 100%);
              display: flex;
              align-items: center;
              .blue-job-line {
                .wh(1px, 100px);
                background: #EBEBEB;
              }
              .blue-job-info-con {
                margin-left: 22px;
                display: flex;
                flex-direction: column;
                .promptly-apply {
                  .wh(120px, 42px);
                  .size-color(16px, #FFF);
                  background: #3CAFFF;
                  border-radius: 4px;
                  &:hover {
                    background: #39A2ED;
                    cursor: pointer;
                  }
                }
                .cancel-apply {
                  .wh(120px, 42px);
                  .size-color(16px, #FFF);
                  background: rgba(255, 166, 60, 1);
                  border-radius: 4px;
                  &:hover {
                    background: #F5A13B;
                    cursor: pointer;
                  }
                }
                .await-apply {
                  .wh(120px, 42px);
                  .size-color(16px, #FFF);
                  background: #CCCCCC;
                  border-radius: 4px;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .blue-job-page-box {
          margin: 44px auto 60px;
        }
        .blue-job-page-box /deep/ .btn-prev span {
          padding-left: 4px;
          padding-right: 4px;
        }
        .blue-job-page-box /deep/ .btn-next span {
          padding-left: 4px;
          padding-right: 4px;
        }
      }
    }
  }
</style>
